<template>
	<view class="template-navigation tn-safe-area-inset-bottom">
		<view class="tn-margin-top">

			<view class='nav-list'>
				<block v-for="(content_item, content_index) in list" :key="content_index">
					<navigator open-type="navigate" hover-class='none' :url="content_item.url"
						class="nav-list-item tn-shadow-blur tn-cool-bg-image tn-main-gradient-aquablue--light">

						<view class="nav-link tn-color-blue">
							<view class='title'>{{ content_item.title }}</view>
							<!-- <view class='author'> <text class="tn-icon-code tn-padding-right-xs"></text> {{ content_item.author }}</view> -->
						</view>
					</navigator>
				</block>
			</view>
		</view>
		<view class="tn-padding">
			<view class="button-number tn-flex tn-flex-row-between tn-flex-col-center"
				style="background: linear-gradient(-120deg, #99E3FE, #C9ECFF, #C9ECFF);">

				<view class="tn-margin-left">
					<view class="tn-flex tn-flex-col-center">
						<text class="tn-text-bold tn-text-xl" style="color: #0D80E8;">更多前端案例更新中</text>
					</view>
					<view class='tn-text-sm tn-margin-top-sm' style="color: #0D80E8;">想了解更多模板？请联系客服获取更多信息</view>
				</view>
				<view class="tn-margin-right button-shake">
					<tn-button shape="round" backgroundColor="#3668FC" fontColor="#FFFFFF" padding="10rpx 0"
						width="160rpx" shadow @click="boda()">
						<text class="tn-text-bold">咨 询</text>
						<text class="tn-icon-right-fill tn-padding-left-xs tn-text-lg"></text>
					</tn-button>
				</view>


			</view>
		</view>


<tn-modal v-model="show1" :custom="true">
      <view class="custom-modal-content">
        <image  src='https://ui.yunchencloud.cn/img/wx.jpg' mode='aspectFill' style="width: 100%;"></image>
        <view class="tn-text-center tn-padding-top" >
          <text class="">客服微信：xinfeng0921 </text>
          <!-- <text class="tn-color-blue--disabled tn-padding-left-xs tn-text-df tn-icon-copy"></text> -->
          </view>
        <view class="tn-text-center tn-padding-top tn-text-md tn-color-orangered">会员可免费获取源码</view>
      </view>
    </tn-modal>


	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import NavIndexButton from '@/libs/components/nav-index-button.vue'
	export default {
		name: 'TemplateNavigation',
		mixins: [template_page_mixin],
		components: {
			NavIndexButton
		},

		data() {
			return {
				show1:false,
				// nav菜单列表
				list: [{
					icon: 'code',
					title: 'ERP示例',
					url: '/pages/demo/erp'
				},
				{
					icon: 'code',
					title: '投票模板示例',
					url: '/pages/demo/toupiao'
				},
				{
					icon: 'code',
					title: '问卷调查示例',
					url: '/pages/demo/wenjuan'
				},
				{
					icon: 'code',
					title: '社区交友示例',
					url: '/pages/demo/jiaoyou'
				},
				{
					icon: 'code',
					title: '上门按摩示例',
					url: '/pages/demo/anmo'
				},
				{
					icon: 'code',
					title: 'Charts图表',
					url: '/pages/demo/tubiao'
				},
				{
					icon: 'code',
					title: '知识付费示例',
					url: '/pages/demo/zhishi'
				},
				{
					icon: 'code',
					title: '盲盒项目开源中',
					url: '/pages/demo/manghe'
				},
				{
					icon: 'code',
					title: '花店前端示例',
					url: '/pages/demo/huadian'
				},
				{
					icon: 'code',
					title: '家具商场示例',
					url: '/pages/demo/jiaku'
				},
				{
					icon: 'code',
					title: '短剧模板示例',
					url: '/pages/demo/duanju'
				}
				,
				{
					icon: 'code',
					title: '健身房示例',
					url: '/pages/demo/jianshenfang'
				},
				
				{
					icon: 'code',
					title: '宠物领养示例',
					url: '/pages/demo/chongwu'
				},
				{
					icon: 'code',
					title: '仿奈雪茶示例',
					url: '/pages/demo/naixue'
				},
				{
					icon: 'code',
					title: '移动官网开源中',
					url: '/pages/demo/gw'
				},
				{
					icon: 'code',
					title: '装修商城示例',
					url: '/pages/demo/zhuangxiu'
				},
				{
					icon: 'code',
					title: '骑手端示例',
					url: '/pages/demo/qishou'
				},
				{
					icon: 'code',
					title: '物流运输示例',
					url: '/pages/demo/tms'
				},
				{
					icon: 'code',
					title: '商家端示例',
					url: '/pages/demo/shangjia'
				},
				{
					icon: 'code',
					title: '名片小程序示例',
					url: '/pages/demo/mingpian'
				},
				{
					icon: 'code',
					title: '医院预约小程序',
					url: '/pages/demo/his'
				},
				{
					icon: 'code',
					title: '项目管理示例',
					url: '/pages/demo/xiangmu'
				},
				{
					icon: 'code',
					title: '物联设备管理',
					url: '/pages/demo/wulianwang'
				},
				{
					icon: 'code',
					title: '租房小程序示例',
					url: '/pages/demo/zufang'
				},
				{
					icon: 'code',
					title: '酒店预定示例',
					url: '/pages/demo/jiudian'
				},
				{
                					icon: 'code',
                					title: 'SCRM移动端示例',
                					url: '/pages/demo/scrmv3'
                				},

                				{
                					icon: 'code',
                					title: '人脉交友示例',
                					url: '/pages/demo/jiaoyouv3'
                				},
				]
			}
		},
		methods: {
			boda() {
				this.show1=true;
				// uni.makePhoneCall({
				// 	phoneNumber: "13476865273", // 电话号码
				// 	success: function() {
				//  	console.log('拨打电话成功');
				// 	},
				// 	fail: function() {
				// 		console.log('拨打电话失败');
				// 	}
				// });
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	/* 标题start */
	.nav_title {
		-webkit-background-clip: text;
		color: transparent;

		&--wrap {
			position: relative;
			display: flex;
			height: 120rpx;
			font-size: 46rpx;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
			background-size: cover;
		}
	}

	/* 标题end */

	/* 组件导航列表 start*/
	.nav-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0rpx 12rpx 0rpx;
		justify-content: space-between;

		/* 列表元素 start */
		.nav-list-item {
			padding: 0rpx 30rpx 15rpx 30rpx;
			border-radius: 12rpx;
			width: 45%;
			margin: 0 18rpx 40rpx;
			background-size: cover;
			background-position: center;
			position: relative;
			z-index: 99;



			/* 元素标题 start */
			.nav-link {
				font-size: 32rpx;
				text-transform: capitalize;
				padding: 0 0 10rpx 0;
				position: relative;

				.title {
					font-weight: bold;
					font-size: 36rpx;
					// color: #FFFFFF;
					margin-top: 30rpx;
					text-align: center;
				}

				.author {
					font-size: 25rpx;
					// color: #FFFFFF;
					margin-top: 10rpx;
					margin-left: -10rpx;
					text-align: center;
				}
			}

			/* 元素标题 end */

			/* 元素图标 start */
			.icon {
				font-variant: small-caps;
				position: absolute;
				top: 20rpx;
				right: 50rpx;
				left: 37%;
				width: 90rpx;
				height: 90rpx;
				line-height: 90rpx;
				margin: 0;
				padding: 0;
				display: inline-flex;
				text-align: center;
				justify-content: center;
				vertical-align: middle;
				font-size: 50rpx;
				color: #FFFFFF;
				white-space: nowrap;
				opacity: 0.9;
				background-color: rgba(0, 0, 0, 0.05);
				background-size: cover;
				background-position: 50%;
				border-radius: 5000rpx;
			}

			/* 元素图标 end */
		}

		/* 列表元素 end */
	}

	/* 组件导航列表 end*/

	.button-shake {
		animation: shake 4s infinite;
	}

	@keyframes shake {

		5%,
		50% {
			transform: scale(1);
		}

		10% {
			transform: scale(0.9);
		}

		15% {
			transform: scale(1.15);
		}

		20% {
			transform: scale(1.15) rotate(-5deg);
		}

		25% {
			transform: scale(1.15) rotate(5deg);
		}

		30% {
			transform: scale(1.15) rotate(-3deg);
		}

		35% {
			transform: scale(1.15) rotate(2deg);
		}

		40% {
			transform: scale(1.15) rotate(0);
		}
	}



	/* 背景波浪高度 */
	.button-number {
		width: 100%;
		height: 150rpx;
		border-radius: 15rpx;
		position: relative;
		z-index: 1;
	}

	/* 动态背景波浪*/
	@keyframes move_wave {
		0% {
			transform: translateX(0) translateZ(0) scaleY(1)
		}

		50% {
			transform: translateX(-25%) translateZ(0) scaleY(1)
		}

		100% {
			transform: translateX(-50%) translateZ(0) scaleY(1)
		}
	}

	.tnwave {
		overflow: hidden;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto;
		z-index: -1;
		border-radius: 15rpx;
	}

	.waveWrapperInner {
		position: absolute;
		width: 100%;
		overflow: hidden;
		height: 100%;
	}

	.wave {
		position: absolute;
		left: 0;
		width: 200%;
		height: 100%;
		background-repeat: repeat no-repeat;
		background-position: 0 bottom;
		transform-origin: center bottom;
	}

	.bgTop {
		opacity: 0.1;
	}

	.waveTop {
		background-size: 50% 45px;
	}

	.waveAnimation .waveTop {
		animation: move_wave 4s linear infinite;
	}

	.bgMiddle {
		opacity: 0.2;
	}

	.waveMiddle {
		background-size: 50% 40px;
	}

	.waveAnimation .waveMiddle {
		animation: move_wave 3.5s linear infinite;
	}

	.bgBottom {
		opacity: 0.3;
	}

	.waveBottom {
		background-size: 50% 35px;
	}

	.waveAnimation .waveBottom {
		animation: move_wave 2s linear infinite;
	}

	.qushuju {
		width: 100vw;
		// padding: 0 35vw ;
		text-align: center;
		font-size: 30rpx;
		line-height: 70rpx;
		color: #939393;

	}
</style>
